<template>
    <header>
        <van-nav-bar title="设置" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
        <div class="set" v-if="!isSet"><span @click="isSet = true">编辑</span><span is-link @click="setPassWodeBox = true">修改密码</span></div>
        <div class="set" v-else><span @click="isSet = false">取消</span><span @click="setUserDataApi">完成</span></div>
        <div class="pic" v-if="userData.obj['user_pic']" :style="{ background: ` url(${getImg(userData.obj['user_pic'])})` }">
            <div class="set-pic">
                <input type="file" @change="changimg" />
                <van-icon name="edit" />
            </div>
        </div>
        <div class="name t">
            用户名: <span v-if="!isSet">{{ userData.obj.passname }}</span>
            <input type="text" v-else v-model="passname" />
        </div>
        <div class="email t">
            邮箱: <span>{{ userData.obj.account }}<van-icon is-link @click="setEmailBox = true" name="edit" /></span>
        </div>
        <div class="signature t">
            个性签名: <span v-if="!isSet">{{ userData.obj.signature ? userData.obj.signature : "暂未填写" }}</span>
            <input type="text" v-else v-model="signature" />
        </div>
        <div class="sex t">
            性别: <span v-if="!isSet">{{ userData.obj.sex ? userData.obj.sex : "暂未填写" }}</span>
            <div class="sex" v-else>
                <van-radio-group direction="horizontal" v-model="checked">
                    <van-radio name="男">男</van-radio>
                    <van-radio name="女">女</van-radio>
                </van-radio-group>
            </div>
        </div>
        <div class="age t">
            年龄: <span v-if="!isSet">{{ userData.obj.age ? userData.obj.age : "暂未填写" }}</span>
            <van-stepper style="margin-left: 10px" v-model="age" min="0" v-else />
        </div>
        <div class="exit">
            <van-button @click="exit" class="btn" type="primary">退出</van-button>
        </div>
    </main>
    <!-- 修改邮箱 -->
    <van-popup v-model:show="setEmailBox" position="bottom" :style="{ height: '70%', padding: '1vh 5vw' }">
        <div class="title">修改邮箱</div>
        <van-form @submit="setEmailApi">
            <van-cell-group inset>
                <van-field v-model="setEmailValue" name="nEmail" label="邮箱" placeholder="请输入新的邮箱" :rules="[{ required: true, message: '请填写邮箱' }]">
                    <template #button>
                        <van-button @click="getCodeApi(0)" size="small" type="primary">发送验证码</van-button>
                    </template>
                </van-field>
                <van-field v-model="code" name="code" label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]" />
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit"> 修改 </van-button>
            </div>
        </van-form>
    </van-popup>
    <!-- 修改密码 -->
    <van-popup v-model:show="setPassWodeBox" position="bottom" :style="{ height: '70%', padding: '1vh 5vw' }">
        <div class="title">修改密码</div>
        <van-form @submit="setPassWodeApi">
            <van-cell-group inset>
                <van-field v-model="oPassWord" type="password" name="oPassWord" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="nPassWord" type="password" name="nPassWord" label="新密码" placeholder="请输入旧密码" :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="eCode" name="code" label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button @click="getCodeApi(1)" size="small" type="primary">发送验证码</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit"> 提交 </van-button>
            </div>
        </van-form>
    </van-popup>
</template>

<script setup>
import { getUserData } from "@/fun/fun";
import axios from "axios";
import { getUserMsg, getImg, uploadsApi, setPic, setUserData, getCode, setEmail, setPassWord } from "@/api/api";
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
let router = useRouter();
let route = useRoute();
// 用户信息
let userData = reactive({ obj: {} });
let account = ref("");
// 是否为修改状态
let isSet = ref(false);
// 修改数据信息
let passname = ref("");
let signature = ref("");
let checked = ref("");
let age = ref(0);
let userPic = ref("");
// 修改邮箱数据
let setEmailBox = ref(false);
let setEmailValue = ref("");
let code = ref("");
// 修改密码部分数据
let setPassWodeBox = ref(false);
let oPassWord = ref("");
let nPassWord = ref("");
let eCode = ref("");
// 初始化个人信息
let getUserDataApi = () => {
    axios(getUserMsg(getUserData())).then(({ data }) => {
        userData.obj = data[0];
        passname.value = userData.obj.passname;
        signature.value = userData.obj.signature;
        checked.value = userData.obj.sex;
        age.value = userData.obj.age;
        account.value = userData.obj.account;
    });
};
getUserDataApi();
// 退回上一个页面
const onClickLeft = () => router.go(-1);
let exit = () => {
    router.push({ name: "principalSheet" });
    document.cookie = "account=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    showSuccessToast("已退出");
};
// 修改头像
let changimg = (event) => {
    let fileInfo = event.target.files[0];
    if (fileInfo.type.split("/")[0] == "image") {
        let suffix = fileInfo.name.split(".")[1];
        if (suffix == "jpg" || suffix == "png" || suffix == "gif" || suffix == "jpeg") {
            let formData = new FormData();
            formData.append("file", fileInfo);
            axios
                .post(uploadsApi(), formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(({ data }) => {
                    axios
                        .post(setPic(), {
                            pic: data.src,
                            account: userData.obj.account,
                            type: "u",
                        })
                        .then(({ data }) => {
                            showSuccessToast(data.m);
                        });
                });

            let fli = new FileReader();
            fli.readAsDataURL(event.target.files[0]);
            fli.onload = function () {
                userPic.value = this.result;
            };
            setTimeout(() => {
                location.reload(true);
            }, 500);
        } else {
            showFailToast("暂不支持该格式的文件");
            showFailToast("请上传jpg,png,gif,jpeg格式的图片");
        }
    } else {
        showFailToast("选择的文件不是图片");
    }
};
// 修改用户信息
let setUserDataApi = () => {
    let arr = [passname.value, signature.value, checked.value, age.value, userData.obj.account];
    console.log();
    axios
        .post(setUserData(), {
            arr,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                showSuccessToast(data.m);
                setTimeout(() => {
                    location.reload(true);
                }, 500);
            } else {
                showFailToast(data.m);
            }
        });
};
//获取验证码
let getCodeApi = (num) => {
    let email;
    if (num) {
        email = account.value;
    } else {
        email = setEmailValue.value;
    }
    axios
        .post(getCode(), {
            email,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                showSuccessToast(data.m);
            } else {
                showFailToast(data.m);
            }
        });
};
// 修改邮箱
let setEmailApi = () => {
    console.log(code);
    axios
        .post(setEmail(), {
            nEmail: setEmailValue.value,
            oEmail: account.value,
            code: code.value,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                showSuccessToast(data.m);
                let times = new Date().setTime(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
                document.cookie = `account=${setEmailValue.value};expires=` + times;
                setTimeout(() => {
                    location.reload(true);
                }, 500);
            } else {
                showFailToast(data.m);
            }
        });
};
// 修改密码
let setPassWodeApi = () => {
    axios
        .post(setPassWord(), {
            oPassWord: oPassWord.value,
            nPassWord: nPassWord.value,
            code: eCode.value,
            account: account.value,
        })
        .then(({ data }) => {
            if (data.s == 200) {
                showSuccessToast(data.m);
                setTimeout(() => {
                    router.push({ name: "loginRegistration" });
                    showFailToast("信息验证过期,请重新先登录");
                    document.cookie = "account=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
                }, 500);
            } else {
                showFailToast(data.m);
            }
        });
};
</script>

<style lang="scss" scoped>
main {
    .set {
        height: 24px;
        text-align: right;
        padding: 10px 20px 0;
        line-height: 24px;
        color: #888;
        font-size: 14px;
        span {
            margin-left: 10px;
        }
    }
    .pic {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-position: center !important;
        background-size: cover !important;
        margin: 10px auto;
        border-radius: 50%;
        overflow: hidden;
        input {
            opacity: 0;
            position: absolute;
            z-index: 999;
        }
        .set-pic {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 30%;
            line-height: 1.875rem;
            font-size: 24px;
            color: #888;
            background-color: rgba($color: #000000, $alpha: 0.1);
            text-align: center;
        }
    }
    .t {
        height: 24px;
        line-height: 24px;
        padding: 10px 20px;
        position: relative;
        span {
            color: rgba($color: #000000, $alpha: 0.4);
        }
        input {
            height: 24px;
            box-sizing: border-box;
            border: none;
            margin-left: 10px;
        }
        .sex {
            position: absolute;
            top: 15px;
            left: 70px;
        }
    }
    .exit {
        margin: 20px auto 0;
        width: 60vw;
        .btn {
            width: 100%;
        }
    }
}
.title {
    font-size: 22px;
    color: #1989fa;
    font-weight: 600;
    text-align: center;
    height: 40px;
    line-height: 40px;
}
</style>
